<template>
  <div class="advice">
    <p>反馈问题类型</p>
    <div class="type">
      <van-radio-group v-model="params.type" direction="horizontal">
        <van-radio name="1">投诉</van-radio>
        <van-radio name="2">建议</van-radio>
      </van-radio-group>
    </div>
    <p>反馈描述</p>
    <div class="main_body" style="text-align: left">
      <van-field v-model="params.content" rows="5" autosize type="textarea" placeholder="请输入留言" :border="false" />
      <van-uploader v-model="params.fileList" :max-count="6" />
    </div>
    <p>联系方式</p>
    <div>
      <van-field v-model="params.phone" label="联系方式" placeholder="请输入你的联系方式" />
      <van-field name="switch" label="是否匿名">
        <template #input>
          <van-switch v-model="params.isAnonymous" size="20" />
        </template>
      </van-field>
      <van-field v-if="!params.isAnonymous" v-model="params.name" label="姓名" placeholder="请输入你的姓名" />
    </div>
    <van-button round type="info" size="large" style="margin-top: 20px" :disabled="!canSubmit" @click="submit">提交
    </van-button>
  </div>
</template>

<script>
import { Notify } from "vant"
export default {
  data() {
    return {
      params: {
        type: "1",
        content: "",
        phone: "",
        isAnonymous: false,
        name: "",
        fileList: [],
      },
    };
  },
  computed: {
    canSubmit() {
      return Boolean(this.params.content && this.params.phone);
    },
  },
  methods: {
    submit() {
      let data = new FormData();
      for (let i in this.params.fileList) {
        data.append("file", this.params.fileList[i].file);
      }
      data.append("type", this.params.type)
      data.append("content", this.params.content)
      data.append("phone", this.params.phone)
      data.append("name", this.params.name)
      this.$axios.post("/saveAdvice", data, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        if (res.code === 200) {
          Notify({ type: 'success', message: '提交成功' })
          this.params.content = ''
          this.params.phone = ''
          this.params.name = ''
          this.params.fileList = []
        }
      }).catch(Notify({ type: 'danger', message: '提交失败' }))
    },
  },
};
</script>

<style scoped>
.advice {
  padding-bottom: 55px;
}

.advice>div {
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #d8d8d8;
  margin: 0 auto;
  width: 90vw;
  padding: 10px;
}

.type {
  text-align: left;
}

p {
  text-align: left;
  padding-left: 10px;
  font-weight: bold;
  margin-bottom: 1px solid;
}

.van-radio-group {
  justify-content: center;
}
</style>